import React, { Component } from 'react'

import style from './index.module.css'

export default class Header extends Component {
  state = { value: '' }

  handleChange = (e) => {
    this.setState({ value: e.target.value })
  }

  handleEnter = (e) => {
    if (e.key === 'Enter') {
      this.props.handleAdd(this.state.value)
      this.setState({ value: '' })
    }
  }

  render() {
    const { value } = this.state

    return (
      <div className={style.header}>
        <input
          placeholder="What needs to be done?"
          className={style.input}
          value={value}
          type="text"
          onChange={this.handleChange}
          onKeyDown={this.handleEnter}
        />
      </div>
    )
  }
}
